Введение

Благодарим за скачивание скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.
Cкрипт «Анимированные диаграммы» позволяет по-новому представить числовую информацию на вашем сайте. Поддерживается два типа диаграмм: вертикальные пары и горизонтальные линии. Имеется возможность вызова в пределах одной страницы одновременно нескольких диаграмм одного или разных типов, при этом у каждой можно задать свои настройки и использовать свой массив данных. Запуск анимации начинается только в тот момент, когда диаграмма будет в пределах области просмотра пользователя.

«Вертикальные пары» работают следующим образом: задается массив числовых значений (можно использовать как целые, так и дробные значения, например: 8, 6.33, 9.2), размерности и легенда (надпись под спаренными столбцами и выноска с цветным обозначением). Обработчик по циклу обходит пары и выбирает в них наибольшие значения, затем принимает их за 100% и высчитывает доли остальным значениям. Таким образом диаграмма строится в полностью автоматическом режиме с всегда точным процентным соотношением. Скрипт позволяет настроить следующие параметры:
- высота блока;
- ширина одного столбика;
- расстояние между спаренными столбиками;
- отступ пар столбцов слева и справа от границы блока;
- отступ текста столбика от верхнего края;
- цвета столбиков и пунктов легенды;
- скорость анимации.
Расстояния между парами столбцов скрипт рассчитывает автоматически в зависимочти от количества заданных значений в массиве. Стоит учитывать тот факт, что при недостаточной ширине блока необходимо уменьшить число значений в массиве, либо увеличить ширину блока, либо перенастроить ширину столбцов и отступов между ними. В противном случае отображение диаграммы будет нарушено.

«Горизонтальные линии» работают немного иначе: задается массив числовых значений, размерностей и легенды (надписи слева от линии), затем обходчик выбирает наибольшее значение массива и принимает его за 100%, далее высчитываются доли остальных значений и строится диаграмма. Скрипт позволяет настроить следующие параметры:
- ширина блока легенды;
- высота одной линии;
- отступ между линиями;
- отступ линий сверху и снизу от границы блока;
- отступ текста линии справа;
- цвет всех линий, цвет активной линии;
- порядковый номер активной линии;
- скорость анимации.

Массив данных при любом типе отображения можно формировать вручную, либо при помощи информера. В качестве легенды можно использовать текст и html-теги. Несколько вариантов использования будет рассмотрено ниже.

Требования к установке:
• скрипт не требует подключения каких-либо модулей.

Первый шаг: загрузка файлов

Перейдите в Панель управления » Файловый менеджер.

В правом верхнем углу кликните на кнопку "Создать папку", введите название папки js. Кликните на галочку и ура, мы создали папку с нужным именем!:)

Теперь зайдите в папку js и загрузите в эту папку файл "liveSchedule.min.js" из архива со скриптом (папка "скрипты").

Второй шаг: установка кода

Перейдите в Панель управления » Дизайн » Управление дизайном (шаблоны) » Верхняя часть сайта, в самый верх вставьте следующий код:

<script type="text/javascript" src="/js/liveSchedule.min.js"></script>

и нажмите кнопку "Сохранить":

Третий шаг: установка стилей

Чтобы разместить стили для диаграмм, перейдите в Панель управления » Управление дизайном » Таблица стилей (CSS), в самый низ шаблона добавьте следующие стили:

/* Вертикальная диаграмма */
.liveScheduleV {margin: 5px 0 15px 0;overflow: hidden;width:100%;}
.liveScheduleV ul.by_list {position:relative;border-bottom:1px solid #434343;list-style:none;margin:0 0 7px 0;padding:0;width:100%;overflow: hidden;}
.liveScheduleV ul.by_list li {position:absolute;bottom:0;float:left;height:100%;left:0;}
.liveScheduleV ul.by_list li div {float:left;position:absolute;bottom:0;height:100%;background:#f4f4f4;border-radius: 3px 3px 0 0;}
.liveScheduleV ul.by_list li div span {position:absolute;width:100%;bottom:0;height:0%;text-align:center;border-radius: 3px 3px 0 0;color:#fff;font-size:12px;}
.lStitle {margin: 0;padding:0;overflow: hidden;width:100%;list-style:none;font-size:12px;box-sizing: border-box; -moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.lStitle li {float:left;text-align:center;}
.lSlegend {margin: 15px 0 0 20px;padding:0;overflow: hidden;width:100%;list-style:none;font-size:12px;}
.lSlegend li {line-height:16px;height:16px;margin: 0 0 4px 0;}
.lSlegend li u {display:block;float:left;width:12px;height:12px;margin: 2px 0;}
.lSlegend li span {display:block;float:left;margin: 0 0 0 4px;}
/* Горизонтальная диаграмма */
.liveScheduleH {margin: 50px 0 0 0 ;width:100%;overflow:hidden;} 
.liveScheduleH ul {list-style:none;overflow:hidden;margin:0;padding:0;box-sizing: border-box; -moz-box-sizing: border-box;-webkit-box-sizing: border-box; }
.bm_left {float:left;text-align:right;}
.bm_left li {padding: 0 10px 0 0;}
.bm_right {float:right;border-left:1px solid #434343;}
.bm_right li {display:block;text-align:right;background:#f4f4f4;border-radius: 0 3px 3px 0;}
.bm_right li span {width:0%;overflow:hidden;float:left;margin-left:-10px;display:block;color:#fff;border-radius: 0 3px 3px 0;}
.bm_left li a {color:#434343;border-bottom: 1px dashed #434343;text-decoration:none;}
.bm_active {}
.bm_right li:last-child, bm_left li:last-child {margin-bottom:0px !important;}

затем нажмите на кнопку "Сохранить":

Информация о классах:

• liveScheduleV – блок вертикальных диаграмм;
• .liveScheduleV ul.by_list – список сдвоенных колонок диаграммы;
• .liveScheduleV ul.by_list li – контейнер для сдвоенных столбцов;
• .liveScheduleV ul.by_list li div – контейнер каждого отдельного столбика;
• .liveScheduleV ul.by_list li div span – анимирующаяся часть столбика;
• .lStitle – блок заголовков легенды под столбиками;
• .lStitle li – заголовок легенды под столбиками;
• .lSlegend – блок пунктов сравнения под блоком диаграммы;
• .lSlegend li – контейнер для каждого из двух пунктов;
• .lSlegend li u – цветной идентификатор на пункте сравнения (квадратик);
• .lSlegend li span – текст пункта сравнения;
• liveScheduleH – блок горизонтальных диаграмм;
• .liveScheduleH ul – общие стили для левого и правого контейнера (левый - легенда, правый - диаграмма);
• .bm_left – стили блока легенды;
• .bm_left li – стили пункта легенды;
• .bm_active – стили активного пункта на легенде;
• .bm_left li a – стилизация ссылки в легенде, если используете ссылки вместо текста, аналогичным образом можно обратиться и к другим тегам и классам;
• .bm_right – стили блока диаграммы;
• .bm_right li – стили полос диаграммы;
• .bm_right li span – стили анимированных полос диаграммы;
• .bm_right li:last-child, bm_left li:last-child – сброс нижних отступов у последних полос диаграммы и легенды;

Четвёртый шаг: настройка и использование

1. Вывод и настройка вертикальных диаграмм. Для этого по месту вставим следующий код:

<div class="liveScheduleV"></div>
<script type="text/javascript">
 var vDate = [
 ['на трассе', 6.6, 6.8, ' л/100км', 'LADA Kalina 2','LADA Granta'],
 ['по городу', 8.1, 8.8, ' л/100км' ],
['смешанный', 6.9, 7.3, ' л/100км' ]
];
 
$('.liveScheduleV').liveSchedule('vertical',
{
 height:240, // высота всего блока
 width: 80, // ширина столбика
 between: 12, // расстояние между сдвоенными столбиками
 margin: 30, // отсутп слева и справа столбиками
 padding: 10, // отступ текста от верхнего края в столбце
 l_color: '#434343', // цвет первого столбика и отметки первой строки на легенде
 r_color: '#E06161',// цвет правого столбика и отметки второй строки на легенде
 time: 2500 // длительность анимации, 0 - нет анимации

}
);
</script>

В качестве примера местом установки выберем главную страницу сайта.

Чтобы разместить код, перейдите в Панель управления » Редактор страниц » Управление страницами сайта, напротив пункта главной страницы кликните на ссылку "Изменить информацию":

Перед вами откроется редактор страниц, там вставьте выше упомянутый код в том месте, где хотите вывести диаграмму.

Теперь немного о том, как формируется массив данных. Для этого используется многомерный массив, где в первой строке

 ['на трассе', 6.6, 6.8, ' л/100км', 'LADA Kalina 2','LADA Granta'],

указывается: текст на легенде под столбцами, численное значение первого столбика, численное значение второго столбика, размерность, первый и второй пункты легенды под блоком.
Во второй и последующих строках указывается только 4 значения: текст на легенде под столбцами, численное значение первого столбика, численное значение второго столбика, размерность.

Информация о переменных:

• height – высота всего блока вертикальных диаграмм;
• width – ширина одного из спаренных столбиков;
• between – расстояние между спаренными столбиками;
• margin – отступ по левому и правому краю по грнице блока;
• padding – отступ текста от верхнего края в столбце;
• l_color – цвет первого из двух спаренных столбиков;
• r_color – цвет второго столбика;
• time – длительность анимации, для отключения анимации поставить 0.

2. Вывод и настройка горизонтальных диаграмм. Для этого по месту устанавливается немного другой код:

<div class="liveScheduleH"></div>
<script type="text/javascript">
 var hDate = [
['хлопок', 90, ' %' ],
['spandex', 10, ' %' ]
];

 
$('.liveScheduleH').liveSchedule('horizontal',
{

height:24,
 width: 10, // ширина левой части, подразумевается процентное соотношение. Рекомендую не выше 50%
 between: 10, // отступ между линиями
 margin: 5, // отступ сверху первой линии и снизу последней
 padding: 10, // отступ текста в линиях от правого края
 allColor: '#434343', // цвет линий
 aColor: '#0092a3', // цвет активной линии
activeLine: 2, // 0 - нет активной линии; 1 - активна первая линия, 2 - вторая и т. д.
 time: 3000 // 0 - нет анимации, секунда = 1000

}
);
</script>

Здесь массив данных формируется проще, каждая новая строка содержит 3 значения: текст легенды, численное значение, размерность.

['хлопок', 90, ' %' ]

Информация о переменных:

• height – высота горизонтальной линии и строки легенды;
• width – ширина блока легенды, указывается в %, не рекомендую указывать ширины < 10 и > 50;
• between – отступ между полосами диаграммы и строками легенды;
• margin – отступ от верхнего и нижнего края первой и последней линиями;
• padding – отступ текста от правого края в столбце;
• allColor – цвет всех линий;
• aColor – цвет активной линии;
• activeLine – номер активной линии, указывается по порядку начиная от 1, 0 - нет активной линии;
• time – длительность анимации, для отключения анимации поставить 0.

Пятый шаг: работа с информерами

Информер «ТОП пользователей». Создадим информер со следующими настройками:

В шаблон информера вставляем такой код:

['<img src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?> /.s/img/icon/social/noavatar.png<?endif?>" width="34px" height="34px">', $REPUTATION$, '']<?if($NUMBER$ != 5)?>,<?endif?>

Далее там, где хотите вывести ТОП, вставляете такой код:

<div class="liveScheduleH"></div>					    				   					    
<script type="text/javascript">
 var hDate = [
 $MYINF_1$
];
$('.liveScheduleH').liveSchedule('horizontal',
{
height:34,
 width: 20, // ширина левой части, подразумевается процентное соотношение. Рекомендую не выше 50%
 between: 15, // отступ между линиями
 margin: 5, // отступ сверху первой линии и снизу последней
 padding: 10, // отступ текста в линиях от правого края
 allColor: '#434343', // цвет линий
 aColor: '#61b3a3', // цвет активной линии
activeLine: 1, // 0 - нет активной линии; 1 - активна первая линия, 2 - вторая и т. д.
 time: 3000 // 0 - нет анимации, секунда = 1000
}
);
</script>